<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公交查询UI</title>
    <link href="../lib/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body role="document">
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航栏</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">bus84.com</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
                <!-- <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a href="#">Action</a></li>
                         <li><a href="#">Another action</a></li>
                         <li><a href="#">Something else here</a></li>
                         <li role="separator" class="divider"></li>
                         <li class="dropdown-header">Nav header</li>
                         <li><a href="#">Separated link</a></li>
                         <li><a href="#">One more separated link</a></li>
                     </ul>
                 </li>-->
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<div class="container-fluid">
    <div class="page-header">
        <h1>
            <span>公交查询</span>
            <a href="javascript:void(0);" class="btn btn-sm" id="bus84_switch_city">深圳[切换]</a><!--城市切换需要弹出框的完善-->
        </h1>
    </div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#bus84_switchLine_query" aria-controls="bus84_switchLine_query" role="tab" data-toggle="tab">换乘查询</a>
        </li>
        <li role="presentation">
            <a href="#bus84_line_query" aria-controls="bus84_line_query" role="tab" data-toggle="tab">线路查询</a>
        </li>
        <li role="presentation">
            <a href="#bus84_station_query" aria-controls="bus84_station_query" role="tab" data-toggle="tab">站点查询</a>
        </li>
    </ul>
    <div class="tab-content">
        <!--bus84_switchLine_query-->
        <div role="tabpanel" class="tab-pane active" id="bus84_switchLine_query">
            <div class="row" style="margin-top: 1%">
                <div class="col-sm-4">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">站点选择</h3>
                        </div>
                        <div class="panel-body">
                            <input name="from_station" type="text" class="form-control " placeholder="起始站">
                            <input name="to_station"  type="text" class="form-control " placeholder="终点站" style="margin-top: 1%">
                            <button class="btn btn-primary" style="margin-top: 1%">查询</button>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            查询结果
                            <a class="btn btn-sm btn-warning" role="button" data-toggle="collapse" href="#collapseExample1" aria-expanded="true" aria-controls="collapseExample">收起</a>
                        </div>
                        <div class="panel-body">
                            <div class="collapse" id="collapseExample1">
                                <div  style="margin-top: 1%">
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                </div>
                            </div>
                        </div>
                    </div>

                </div><!-- /.col-sm-4 -->
                <div class="col-sm-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">线路分类</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <span class="badge">14</span>
                                    华强车队
                                </li>
                                <li class="list-group-item">
                                    <span class="badge">2</span>
                                    国家线
                                </li>
                                <li class="list-group-item">
                                    <span class="badge">1</span>
                                    龙乡路
                                </li>
                            </ul>
                        </div>
                    </div>
                </div><!-- /.col-sm-4 -->
            </div>

        </div>

        <div role="tabpanel" class="tab-pane" id="bus84_line_query">
            <div class="row" style="margin-top: 1%">
                <div class="col-sm-4">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">线路名称</h3>
                        </div>
                        <div class="panel-body">
                                <div class="input-group">
                                    <input name="line_name"  type="text" class="form-control" placeholder="输入线路名称">
                                  <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button">查询</button>
                                  </span>
                                </div>

                                <div class="well" style="margin-top: 1%">
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                    这里是内容
                                </div>
                        </div>
                    </div>

                </div><!-- /.col-sm-4 -->
                <div class="col-sm-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">站点分类</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <span class="badge">14</span>
                                    华强车队
                                </li>
                                <li class="list-group-item">
                                    <span class="badge">2</span>
                                    国家线
                                </li>
                                <li class="list-group-item">
                                    <span class="badge">1</span>
                                    龙乡路
                                </li>
                            </ul>
                        </div>
                    </div>
                </div><!-- /.col-sm-4 -->
            </div>
            <a class="btn btn-warning btn-sm" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                线路信息
            </a>
            <div class="collapse" id="collapseExample">
                <div class="well">
                    hello
                </div>
            </div>

        </div>

        <div role="tabpanel" class="tab-pane" id="bus84_station_query">
            <div class="row" style="margin-top: 1%">
                <div class="col-sm-4">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">站点名称</h3>
                        </div>
                        <div class="panel-body">
                            <div class="input-group">
                                <input name="line_name"  type="text" class="form-control" placeholder="输入站点名称">
                              <span class="input-group-btn">
                                <button class="btn btn-primary" type="button">查询</button>
                              </span>
                            </div>
                            <div class="well" style="margin-top: 1%">
                                这里是内容
                                这里是内容
                                这里是内容
                                这里是内容
                                这里是内容
                                这里是内容
                                这里是内容
                                这里是内容
                                这里是内容
                                这里是内容
                            </div>
                        </div>
                    </div>

                </div><!-- /.col-sm-4 -->
                <div class="col-sm-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">站点信息</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <span class="badge">14</span>
                                    华强车队
                                </li>
                                <li class="list-group-item">
                                    <span class="badge">2</span>
                                    国家线
                                </li>
                                <li class="list-group-item">
                                    <span class="badge">1</span>
                                    龙乡路
                                </li>
                            </ul>
                        </div>
                    </div>
                </div><!-- /.col-sm-4 -->
            </div>
            <a class="btn btn-warning btn-sm" role="button" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                站点信息
            </a>
            <div class="collapse" id="collapseExample2">
                <div class="well">
                    hello
                </div>
            </div>

        </div>
    </div>
</div>
<script src="../lib/jquery/jquery-1.12.1.min.js"></script>
<script src="../lib/bootstrap-3.3.5/js/bootstrap.js"></script>
</body>
</html>